<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>首页</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Theme style -->
    <link rel="stylesheet" th:href="@{/css/adminlte.min.css}">
    <!-- Font Awesome -->
    <link rel="stylesheet" th:href="@{plugins/fontawesome-free/css/all.min.css}">
    <link rel="stylesheet" th:href="@{/css/my.css}">
    <link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css" rel="stylesheet">
</head>
<body class="hold-transition sidebar-mini layout-fixed" style="opacity: 99%">
<div class="wrapper">
    <!-- Navbar -->
    <nav class="main-header  animated fadeInDown navbar navbar-expand navbar-white navbar-light ">
        <!-- Left navbar links -->
        <ul class="navbar-nav animated fadeIn">
            <li class="nav-item">
                <!-- PushMenu插件控制主侧栏的切换按钮。
                用法
                该插件可以作为jQuery插件或使用数据API激活。
                数据API
                添加data-widget="pushmenu"到按钮以激活插件。-->
                <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fa fa-bars">导航栏</i></a>
            </li>
            <li class="nav-item d-none d-sm-inline-block">
                <h5 class="nav-link"
                    style="position: absolute; right: 10px; color: black; font-family: 'STXingkai';">
           我是张三是李四，是芸芸众生中最平凡的那一个。我经常被生活锤得心灰意冷，可我从来都没放弃过。
                   </h5>
            </li>

        </ul>

        <!-- SEARCH FORM -->
        <form class="form-inline ml-3" th:action="@{/search}">
            <div class="input-group input-group-sm">
                <input name="blogName" class="form-control form-control-navbar" type="search" placeholder="按博客名搜索..."
                       aria-label="Search">
                <div class="input-group-append">
                    <button class="btn btn-navbar" type="submit">
                        <i class="fa fa-search"></i>
                    </button>
                </div>
            </div>
        </form>

    </nav>
    <!-- /.navbar -->

    <!-- Main Sidebar Container 左侧主容器 -->
    <aside class="main-sidebar sidebar-light-primary  elevation-4 animated fadeInLeft">
        <!-- 左侧容器头-->
        <h1>
            <a th:href="@{index}" class="brand-link">
                <img th:src="@{/upload/avatar.jpg}" class="brand-image img-circle elevation-3">
                <span class="brand-text font-weight-light"><h3 style="color: black">WhyBlog</h3></span>
            </a>
        </h1>
        <!-- Sidebar -->
        <!--     被选中的颜色-->
        <div class="sidebar ">
            <!-- Sidebar Menu -->
            <nav class="mt-4">
                <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu"
                    data-accordion="false">
                    <!-- Add icons to the links using the .nav-icon class
                         with font-awesome or any other icon font library -->
                    <li class="nav-header">刀斩肉身</li>
                    <li class="nav-item ">
                        <a th:href="@{/index}" class="nav-link active" >
                            <i class="fa fa-home nav-icon"></i>
                            <p>首页</p>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a th:href="@{/type}" class="nav-link">
                            <i class="fa fa-bookmark nav-icon"></i>
                            <p>分类</p>
                        </a>
                    </li>
<!--                    <li class="nav-item">-->
<!--                        <a href="https://leetcode-cn.com/u/why-21/" target="_blank" class="nav-link">-->
<!--                            <i class="fa fa-tags nav-icon"></i>-->
<!--                            <p>leetCode主页</p>-->
<!--                        </a>-->
<!--                    </li>-->
                    <li class="nav-item">
                        <a href="https://gitee.com/why741/" target="_blank" class="nav-link">
                            <i class="fa fa-tags nav-icon"></i>
                            <p>gitee</p>
                        </a>
                    </li>


                    <li class="nav-header">心斩灵魂</li>
                    <li class="nav-item">
                        <a th:href="@{/archive}" class="nav-link" >
                            <i class="fa fa-archive nav-icon"></i>
                            <p>归档</p>
                        </a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link" onclick="alert('页面开发中~')">
                            <i class="fa fa-archive nav-icon"></i>
                            <p>我的学习路线</p>
                        </a>
                    </li>


                </ul>
            </nav>
            <!-- /.sidebar-menu -->
        </div>
        <!-- /.sidebar -->
    </aside>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper mt-3 ">
        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-9 animated fadeIn">
                        <div class="card card-blue card-outline mb-5">
                            <div class="card-header">
                                <!--                博客数量-->
                                <h3 class="card-title float-right">
                                    当前共 <span class="text-blue text-xl" th:text="${msg.size}">1</span> 篇博客
                                </h3>
                            </div><!-- /.card-header -->
                            <!--              卡片体-->
                            <div class="card-body bg-hover-gray" th:each="blog:${msg.getList()}">
                                <div class="mb-1">
                                    <a th:href="'/detail/'+${blog.id}" th:text="${blog.name}" target="_blank"
                                       class="text-lg text-bold link-title"></a>
                                    <span class="badge badge-primary">原创</span>
                                </div>
                                <p th:text="${blog.description}">
                                    Lorem ipsum represents a long-held tradition for designers,
                                    typographers and the like. Some people hate it and argue for
                                    its demise, but others ignore the hate as they create awesome
                                    tools to help create filler text for everyone from bacon lovers
                                    to Charlie Sheen fans.
                                </p>
                                <!--                                date and views-->
                                <p>
                                    <i class="far fa-calendar-alt mr-1"></i>
                                    <span th:text="${#dates.format(blog.create_time,'YYYY-MM-dd HH:mm:ss')}"
                                          class="text-sm mr-2"> 2019-01-01 10:08</span>
                                    <i class="far fa-eye mr-1"></i>
                                    <span th:text="${blog.views}" class="text-sm"> 10</span>
                                </p>
                                <p class="mb-0">
                                    <a th:text="${blog.type.name}" th:href="'/type?id='+${blog.type.id}"
                                       class="btn btn-outline-primary btn-xs">分类
                                    </a>
                                </p>
                                <hr class="m-3 bg-blue">
                            </div><!-- /.card-body -->


                            <div class="card-footer clearfix">
                                <nav aria-label="Page navigation example">
                                    <ul class="pagination justify-content-end">
                                        <li class="page-item">
                                            <span class="page-link"
                                                  th:text="' 共'+${msg.navigatepageNums.length}+'页'"></span>
                                        </li>
                                        <li th:if="${msg.hasPreviousPage}" class="page-item ">
                                            <a class="page-link" th:href="'/?pageNum='+${msg.prePage}" tabindex="-1"
                                               aria-disabled="true">Previous</a>
                                        </li>
                                        <li th:each="num:${msg.navigatepageNums}"
                                            th:class="${msg.pageNum==num?'page-item active':''}" class="page-item">
                                            <a class="page-link " th:href="'/?pageNum='+${num}" th:text="${num}"></a>
                                        </li>

                                        <li class="page-item">
                                            <a th:if="${msg.hasNextPage}" class="page-link"
                                               th:href="'/?pageNum='+${msg.nextPage}" tabindex="-1"
                                               aria-disabled="true">Next</a>
                                        </li>
                                    </ul>
                                    <div></div>
                                </nav>
                            </div><!-- /.card-footer -->
                        </div>
                        <!-- /.nav-tabs-custom -->
                    </div>
                    <!-- /.col -->

                    <div class="col-md-3 animated fadeInRight">
                        <!-- Profile Image -->
                        <div class="card widget-user ">
                            <!-- Add the bg color to the header using any of the bg-* classes -->
                            <div class="widget-user-header bg-primary">
                                <h3 class="widget-user-username">闰土和戴夫的Blog</h3>
                                <h5 class="widget-user-desc">记录技术成长点滴~</h5>
                            </div>
                            <div class="widget-user-image">
                                <img class="img-circle elevation-2" src="/upload/avatar.jpg" alt="User Avatar">
                            </div>
                            <div class="card-body pt-5">
                                <p  style="font-family: 'STXingkai';font-size: 24px;color: black">
                                    Java初学者,大三狗一枚,喜欢学轮子,梦想造轮子,目前备战秋招中~
                                </p>
                                <ul class="list-group list-group-unbordered">
                                    <li class="list-group-item">
                                        <strong><i class="far fa-bookmark mr-2"></i>所有分类<br/></strong>
                                        <a  th:each="type : ${types}" th:href="'/type?typeId='+${type.id}"
                                            th:text="${type.name}" style="margin: 4px;"
                                           class="btn btn-outline-primary btn-sm">Java</a>
                                    </li>
                                    <li class="list-group-item">
                                        <strong><i class="fa fa-map-marker-alt mr-2"></i>位置</strong>
                                        <div class="text-muted">辽宁 沈阳</div>
                                    </li>

                                    <li class="list-group-item">
                                        <strong><i class="fa fa-pencil-alt mr-2"></i>技能(只会一点点,不能会多了)</strong>
                                        <div class="text-muted">
                                            <span class="badge badge-success">Java</span>
                                            <span class="badge badge-success">Mysql</span>
                                            <span class="badge badge-success">Redis</span>
                                            <span class="badge badge-success">Spring全家桶</span>
                                            <span class="badge badge-success">Linux</span>
                                            <span class="badge badge-success">Docker</span>
                                            <span class="badge badge-success">Mybatis</span>
                                            <span class="badge badge-success">Html</span>
                                            <span class="badge badge-success">Css</span>
                                            <span class="badge badge-success">JavaScript</span>
                                            <span class="badge badge-success">Vue</span>
                                            <span class="badge badge-success">Ajax</span>
                                        </div>
                                    </li>

                                    <li class="list-group-item">
                                        <strong><i class="fa fa-lightbulb mr-2"></i>爱好</strong>
                                        <div class="text-muted">
                                            <span class="badge badge-warning">编程</span>
                                            <span class="badge badge-warning">健身</span>
                                            <span class="badge badge-warning">LOL</span>
                                        </div>
                                    </li>

                                    <li class="list-group-item text-center">
                                        <button class="btn btn-success btn-sm rounded-circle" data-toggle="tooltip"
                                                data-placement="top"
                                                title="1585049082">
                                            <i class="fab fa-qq"></i>
                                        </button>
                                        <button class="btn btn-success btn-sm rounded-circle" data-toggle="tooltip"
                                                data-placement="top"
                                                title="17542912457">
                                            <i class="fab fa-weixin"></i>
                                        </button>
                                        <button
                                                class="btn btn-success btn-sm rounded-circle" data-toggle="tooltip"
                                                data-placement="top"
                                                title="建昌县凌东高级中学">
                                            <i class="fab fa-xing"></i>
                                        </button>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /.col -->
                <!-- /.row -->
            </div><!-- /.container-fluid -->
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->
    <footer class="main-footer">
        <p class="text-center mb-1">
            Copyright © 2020 Designed by ZengZK, I made some changes based on Zen's blog pages.
        </p>
        <p class="text-center mb-1">
            Powered by AdminLTE
        </p>
        <p class="text-center">
            <a href="http://beian.miit.gov.cn" target="_blank">辽ICP备2020013405号</a>
        </p>
    </footer>
</div>
<!-- ./wrapper -->

<!-- jQuery -->
<script th:src="@{/plugins/jquery/jquery.min.js}"></script>
<!-- Bootstrap 4 -->
<script th:src="@{/plugins/bootstrap/js/bootstrap.bundle.min.js}"></script>
<!-- AdminLTE App -->
<script th:src="@{/js/adminlte.min.js}"></script>
<script th:src="@{/js/tooltip.init.js}"></script>

</body>
</html>
